import React, { Component, useRef } from "react";
import { Form, Input, Button, Checkbox, Radio, Avatar, message } from "antd";
import { UserOutlined } from "@ant-design/icons";
import data from "../../mobx/data";
import { http } from "../../api";
import { baseURL } from "../../api/ajax";
export default function Changepass() {
  const ipt = useRef();
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const onFinish = (values) => {
    http.updatepersonal(values).then((res) => {});
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const onChange = (e) => {
    console.log("radio checked", e.target.value);
    // setValue(e.target.value);
  };
  const sendFile = () => {
    var file = ipt.current.files[0];
    var datafile = new FormData();
    datafile.append("avatar", file);
    http.sendavatar(datafile).then((res) => {
      if (res.data.code == 200) {
        data.changeUserinfo({
          avatar: res.data.path,
        });
      }
    });
  };
  const uploadFile = () => {
    ipt.current.click();
  };
  const upupup = () => {
    message.info("算了算了");
  };
  return (
    <div>
      <h3 style={{ textAlign: "center", fontSize: "30px" }}>个人信息</h3>
      <div style={{ display: "flex" }}>
        <div
          style={{
            width: "40%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "wrap",
          }}
        >
          <input
            onChange={sendFile}
            type="file"
            style={{ display: "none" }}
            ref={ipt}
          />
          {data.userinfo && data.userinfo.avatar ? (
            <Avatar
              shape="square"
              size={300}
              icon={<UserOutlined />}
              onClick={uploadFile}
              src={data.userinfo.avatar.replace(/public/, baseURL)}
            />
          ) : (
            <Avatar
              shape="square"
              onClick={uploadFile}
              style={{
                backgroundColor: "#87d068",
                margin: "0px 10px",
                cursor: "pointer",
              }}
              size={300}
              icon={<UserOutlined />}
            />
          )}
          <Button type="primary" style={{ marginTop: "30px" }} onClick={upupup}>
            充值成为会员
          </Button>
        </div>
        <div>
          {data.userinfo && (
            <Form
              {...layout}
              name="basic"
              initialValues={{
                phone: data.userinfo.phone,
                username: data.userinfo.username,
                password: data.userinfo.password,
                age: data.userinfo.age,
                sex: data.userinfo.sex,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
            >
              <Form.Item
                label="用户名"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "请输入用户名",
                  },
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: "请输入密码",
                  },
                ]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="绑定手机"
                name="phone"
                rules={[
                  {
                    required: true,
                    message: "请输入手机号",
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                label="性别"
                name="sex"
                rules={[
                  {
                    required: true,
                    message: "请选择性别",
                  },
                ]}
              >
                <Radio.Group onChange={onChange}>
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                label="年龄"
                name="age"
                rules={[
                  {
                    required: true,
                    message: "请输入年龄",
                  },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          )}
        </div>
      </div>
    </div>
  );
}
